<template>
	<div class="order-details">
		<!-- 订单状态 -->
		<div class="status-bar">
			<h3>等待付款</h3>
			<!-- <p>剩 {{ minutes }} 分 {{ seconds }} 秒自动关闭</p> -->
		</div>

		<!-- 用户信息 -->
		<div class="user-info">
			<p>{{ orderData.address }}</p>
		</div>

		<!-- 商品列表 -->
		<div class="product-list">
			<div class="product-item" v-for="(item, index) in orderData.items" :key="item.id">
				<img :src="item.sku.imageUrl " alt="Product Image">
				<div class="product-details">
					<h4>{{ item.productName }}</h4>
					<p class="product-spec">{{ item.specInfo }}</p>
					<p class="product-price">¥{{ item.price }}</p>
				</div>
				<span class="product-quantity">x{{ item.quantity }}</span>
			</div>
		</div>


		<!-- 订单信息 -->
		<div class="order-info">
			<div class="info-row">
				<span>订单编号：</span>
				<span>{{orderData.orderNo}}</span>
			</div>
			<div class="info-row">
				<span>下单时间：</span>
				<span>{{ formatTime(orderData.createTime) }}</span>


			</div>
			<div class="info-row">
				<span>支付方式：</span>
				<span>{{ getPaymentTypeName(orderData.paymentType) }}</span>
			</div>
			<div class="info-row">
				<span>商品合计</span>
				<span>¥{{orderData.itemsAmount }}</span>
			</div>
			<div class="info-row">
				<span>活动优惠</span>
				<span class="discount">-¥{{(orderData.discountAmount - orderData.couponAmount)}}</span>
			</div>
			<div class="info-row">
				<span>优惠券</span>
				<span class="discount">-¥{{orderData.couponAmount}}</span>
			</div>
			<div class="info-row">
				<span>运费</span>
				<span>+¥0.00</span>
			</div>
			<div class="info-row total">
				<span>实付款：</span>
				<span>¥{{orderData.totalAmount}}</span>
			</div>
		</div>

		<!-- 客服信息 -->
		<div class="customer-service">
			<p>服务时间：9:00-24:00</p>
			<div class="service-buttons" @click="toOnlineService()">
				<button class="service-btn">在线客服</button>

				<button class="service-btn">电话客服</button>
			</div>
		</div>
		<!-- 底部按钮 -->
		<div class="bottom-buttons">
			<button class="cancel-btn" @click="onCancelOrder(orderData)">取消订单</button>
			<!-- 	<button class="pay-btn" @click="goToPayment">付款</button> -->
			<button  class="pay-btn" v-if="orderData.statusText === 'pendingPayment'" @click="onPay(orderData)">立即支付</button>
		</div>

		<!-- 取消订单确认对话框 -->
		<!-- <uni-popup ref="cancelPopup" type="dialog">
			<uni-popup-dialog type="info" title="确认取消订单" content="确定要取消此订单吗？" @confirm="confirmCancel"
				@close="closeCancel"></uni-popup-dialog>
		</uni-popup> -->

		<!-- 支付密码输入弹窗 -->
		<view v-if="showPasswordModal" class="password-modal-mask" @click="closePasswordModal">
			<view class="password-modal-popup" @click.stop>
				<view class="password-modal-header">
					<text class="password-modal-title">请输入支付密码</text>
					<text class="close-btn" @click="closePasswordModal">×</text>
				</view>
				<view class="password-modal-content">
					<text class="payment-amount">支付金额：¥{{ currentOrder.totalAmount }}</text>
					<view class="password-input-container">
						<input class="password-input" type="number" password maxlength="6" placeholder="密码6个1"
							:value="password" @input="onPasswordInput" focus />
					</view>
					<view class="password-dots">
						<view class="password-dot" v-for="i in 6" :key="i" :class="{ 'filled': i <= password.length }">
						</view>
					</view>
				</view>
				<view class="password-modal-footer">
					<view class="cancel-btn" @click="closePasswordModal">
						<text class="cancel-text">取消</text>
					</view>
					<view class="confirm-btn" @click="confirmPayment">
						<text class="confirm-text">确认支付</text>
					</view>
				</view>
			</view>
		</view>


	</div>
</template>

<script>
	import {
		get,
		put
	} from '@/utils/request';
	export default {
		data() {
			return {
				orderData: {}, // 用来保存订单信息
				showPasswordModal: false,
				password: ''
			};
		},
		methods: {
			toOnlineService() {
				uni.navigateTo({
					url: '/pages/mySxz/onlineService/onlineService'
				});

			},
			/* 更改时区 （后端传递差八个小时）*/
			formatTime(t) {
				if (!t) return '';
				return new Date(t.replace(' ', 'T') + 'Z')
					.toLocaleString('zh-CN', {
						hour12: false
					})
					.replace(/\//g, '-');
			},
			getPaymentTypeName(type) {
				switch (type) {
					case 1:
						return '支付宝';
					case 2:
						return '微信';
					case 3:
						return '银行卡';
					default:
						return '未知';
				}
			},
			// showCancelConfirm() {
			// 	this.$refs.cancelPopup.open();
			// },
			// confirmCancel() {
			// 	// 确认取消订单逻辑
			// 	clearInterval(this.timer);
			// 	uni.showToast({
			// 		title: '订单已取消',
			// 		icon: 'success'
			// 	});
			// 	// 跳转到购物车页面
			// 	uni.navigateTo({
			// 		url: '/pages/cart/noTabBarCart'
			// 	});
			// },
			// closeCancel() {
			// 	this.$refs.cancelPopup.close();
			// },
			async onCancelOrder(orderData) {
				uni.showModal({
					title: '确认取消',
					content: '您确定要取消订单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// console.log(orderData);
								// 拷贝一份订单对象并修改状态
								const payload = {
									...orderData,
									status: 4
								};

								const response = await put('/transaction/shoporder', payload);

								if (response.code === 200) {

									uni.showToast({
										title: '取消成功',
										icon: 'success'
									});
									console.log("取消成功后");
									console.log(orderData);
									// 更新缓存区数据  替换成刚取消的订单信息
									uni.setStorageSync("cancleOrderData", orderData);
									uni.redirectTo({
										url: '/pages/orderCancle/orderCancle'
									});
								} else {
									uni.showToast({
										title: '操作失败',
										icon: 'none'
									});
								}
							} catch (err) {
								uni.showToast({
									title: '请求失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			onPay(orderData) {
				console.log('支付订单', orderData);
				uni.showModal({
					title: '确认支付',
					content: '您确定要支付订单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '前往支付',
								icon: 'success'
							});
							this.currentOrder = orderData;
							this.showPasswordModal = true;
							console.log(orderData.totalAmount)
						}
					}
				});
			},

			// 关闭密码输入弹窗
			closePasswordModal() {
				this.showPasswordModal = false;
				this.password = '';
			},

			// 输入密码
			onPasswordInput(e) {
				this.password = e.detail.value;
			},

			// 确认支付
			// 确认支付
			async confirmPayment() {
				if (!this.password || this.password.length !== 6) {
					uni.showToast({
						title: '请输入6位支付密码',
						icon: 'none'
					});
					return;
				}

				// 检查密码是否正确（固定密码为111111）
				if (this.password !== '111111') {
					uni.showLoading({
						title: '支付中...'
					});
					setTimeout(() => {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/PayFail/PayFail'
						});
					}, 2000);
					return;
				}

				uni.showLoading({
					title: '支付中...'
				});

				try {
					// 直接修改订单状态

					const payload = {
						...this.currentOrder,
						status: 1
					}; // 0 → 1
					const res = await put('/transaction/shoporder', payload);

					uni.hideLoading();

					if (res.code === 200) {
						// 更新缓存区数据  替换成刚付款成功  待发货的订单信息
						// uni.setStorageSync("shipOrderData", orderData);
						uni.redirectTo({
							url: '/pages/PaySuccess/PaySuccess'
							// url:'/pages/shiporder/shiporder'
						});
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.hideLoading();
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				}
			},


			// goToPayment() {
			// 	// 跳转到填写订单页面
			// 	uni.navigateTo({
			// 		url: '/pages/FillOrderDetail/FillOrderDetail'
			// 	});
			// },
			onLoad() {
				this.orderData = uni.getStorageSync("unpaidOrderData") || {};
				console.log("收到的未付款订单数据：", this.orderData);
			}

		}
	};
</script>

<style scoped>
	.order-details {
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		color: #333;
		padding-bottom: 70px;
		background-color: #f5f5f5;
	}

	.status-bar {
		background-color: #FF9500;
		color: white;
		padding: 15px;
		text-align: center;
		height: 52px;
	}

	.status-bar h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 500;
	}

	.status-bar p {
		margin: 5px 0 0;
		font-size: 14px;
	}

	.user-info {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.user-info p {
		margin: 5px 0;
		font-size: 14px;
		line-height: 1.4;
	}

	.product-list {
		margin: 10px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-item:last-child {
		border-bottom: none;
	}

	.product-item img {
		width: 70px;
		height: 70px;
		border-radius: 4px;
		object-fit: cover;
		margin-right: 12px;
	}

	.product-details {
		flex: 1;
	}

	.product-details h4 {
		margin: 0 0 5px;
		font-size: 15px;
		font-weight: 500;
	}

	.product-spec {
		margin: 0 0 5px;
		font-size: 12px;
		color: #999;
	}

	.product-price {
		margin: 0;
		font-size: 15px;
		color: #FF9500;
		font-weight: 500;
	}

	.product-quantity {
		color: #666;
		font-size: 14px;
	}

	.order-info {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.discount {
		color: #FF9500;
	}

	.total {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
		font-weight: 500;
		color: #333;
	}

	.customer-service {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.customer-service p {
		margin: 0 0 15px;
		font-size: 14px;
		color: #666;
	}

	.service-buttons {
		display: flex;
		justify-content: center;
		gap: 15px;
	}

	.service-btn {
		padding: 4px 20px;
		/* 高度减小 */
		border: 1px solid #FF9500;
		border-radius: 20px;
		background: white;
		color: #FF9500;
		font-size: 14px;
		height: 30px;
		/* 新增固定高度 */
		line-height: 22px;
		/* 调整行高以适应新高度 */
	}

	.recommended-products {
		margin: 10px;
		padding: 15px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.recommended-products h3 {
		margin: 0 0 15px;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
	}

	.product-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.recommended-products .product-item {
		display: flex;
		flex-direction: column;
		padding: 0;
		border: none;
	}

	.recommended-products img {
		width: 100%;
		height: 150px;
		border-radius: 4px;
		margin-bottom: 8px;
	}

	.product-name {
		margin: 0 0 5px;
		font-size: 13px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 36px;
		line-height: 18px;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		padding: 10px;
		background: white;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
	}

	.cancel-btn {
		padding: 4px 20px;
		/* 高度减小 */
		border: 1px solid #ccc;
		border-radius: 4px;
		background: white;
		color: #333;
		font-size: 14px;
		margin-right: 10px;
		height: 30px;
		/* 新增固定高度 */
		line-height: 22px;
		/* 调整行高以适应新高度 */
	}

	.pay-btn {
		padding: 4px 25px;
		/* 高度减小 */
		border: none;
		border-radius: 4px;
		background: #FF9500;
		color: white;
		font-size: 14px;
		height: 30px;
		/* 新增固定高度 */
		line-height: 22px;
		/* 调整行高以适应新高度 */
	}
	/* 支付密码输入弹窗样式 */
	.password-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.1);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.password-modal-popup {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}
	
	.password-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.password-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.password-modal-content {
		padding: 40rpx 30rpx;
		text-align: center;
	}
	
	.payment-amount {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}
	
	.password-input-container {
		margin-bottom: 30rpx;
	}
	
	.password-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		text-align: center;
		letter-spacing: 10rpx;
	}
	
	.password-dots {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.password-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		background-color: transparent;
	}
	
	.password-dot.filled {
		background-color: #333;
		border-color: #333;
	}
	
.password-modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}

.password-modal-footer .cancel-btn,
.password-modal-footer .confirm-btn {
  flex: 1; /* 确保两个按钮平分宽度 */
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-text,
.confirm-text {
  font-size: 32rpx;
}

.password-modal-footer .cancel-btn {
  background-color: #f5f5f5;
}

.password-modal-footer .confirm-btn {
  background-color: #ff2a3a;
  color: white; /* 添加白色文字确保可读性 */
}
	/* 动画效果 */
	@keyframes slideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
</style>